<template>
	<div class="login">
		<div class="item">
			<el-row>
				<el-col :span="14" class="left">
					<el-carousel direction="vertical" height="48vh">
						<el-carousel-item v-for="(item, index) in images" :key="item.id">
							<img :src="item.src">
						</el-carousel-item>
					</el-carousel>
				</el-col>
				<el-col :span="10" class="right">
					<el-tabs v-model="activeName">
						<el-tab-pane label="登录" name="first" class="tab-login">
							<el-form :rules="rules" class="demo-ruleForm" :model="form" ref="form">
								<el-form-item label="账号:" label-width="80px" prop="acount">
									<el-input type="text" placeholder="请输入账号/手机号" v-model="form.acount"></el-input>
								</el-form-item>
								<el-form-item label="密码:" label-width="80px" prop="pass">
									<el-input type="password" placeholder="请输入密码" v-model="form.pass"></el-input>
								</el-form-item>
								<el-form-item label-width="80px">
									<el-button type="primary" @click="toSubmit">登录</el-button>
								</el-form-item>
							</el-form>
						</el-tab-pane>
						<el-tab-pane label="注册" name="second">
							<el-form :rules="rules" class="demo-ruleForm" :model="ruleForm" ref="ruleForm">
								<el-form-item label="用户名:" label-width="80px" prop="userName">
									<el-input type="text" placeholder="请输入用户名" v-model="ruleForm.userName"></el-input>
								</el-form-item>
								<el-form-item label="手机号:" label-width="80px" prop="acount">
									<el-input type="text" placeholder="请输入手机号" v-model="ruleForm.acount"></el-input>
								</el-form-item>
								<el-form-item label="密码:" label-width="80px" prop="pass">
									<el-input type="password" placeholder="请输入密码" v-model="ruleForm.pass"></el-input>
								</el-form-item>
								<el-form-item label-width="80px">
									<el-button type="primary" @click="toRegister">注册</el-button>
								</el-form-item>
							</el-form>
						</el-tab-pane>
					</el-tabs>

				</el-col>
			</el-row>
		</div>
	</div>
</template>

<script>
	import { validatePhone, validatePass, validateUsername } from '../../util/validate.js'
	import { insertNewOne, getUserdata } from '../../api/userBM.js'
	
	export default {
		data() {
			return {
				activeName: 'first',
				images: [{
						id: 1,
						src: require("../../assets/img/img1.jpg")
					},
					{
						id: 2,
						src: require("../../assets/img/img2.jpg")
					},
					{
						id: 3,
						src: require("../../assets/img/img3.jpg")
					}
				],
				form: {
					acount: '',
					pass: ''
				},
				ruleForm: {
					userName: "",
					acount: "",
					pass: "",
					addTime: "",
					userImg: 'http://localhost:8000/img/uploadFiles/multerFile-1621407937230.jpg'
				},
				rules: {
					userName: [{
						required: "true",
						message: "账号不能为空",
						trigger: "blur",
					}, 
					{
						validator: validateUsername,
						trigger: 'blur'
					}],
					acount: [{
						required: 'true',
						message: '手机号不能为空',
						trigger: 'blur'
					},
					{
						validator: validatePhone,
						trigger: 'blur'
					}],
					pass: [{
						required: 'true',
						message: '密码不能为空',
						trigger: 'blur'
					},
					{
						validator: validatePass,
						trigger: 'blur'
					}]
				}
			}
		},
		methods: {
			toSubmit() {
				this.$refs.form.validate((valid) => {
					if (valid) {
						getUserdata({
							acount: this.form.acount,
							pass: this.form.pass
						}).then(res => {
							this.$notify({
								title: "登录成功！",
								type: "success",
							});
							this.$router.push({name: 'Home'})
						})
					} else {
						return false;
					}
				});
			},
			toRegister() {
				this.$refs.ruleForm.validate((valid) => {
					if (valid) {
						const time = new Date();
						this.ruleForm.addTime = time.toLocaleString();
						insertNewOne(this.ruleForm).then(res => {
							console.log("注册表", this.ruleForm);
							this.$notify({
								title: "注册成功！",
								type: "success",
							});
							this.activeName = "first"
						})
					} else {
						return false;
					}
				});
			},
		},
	}
</script>

<style lang="scss" scoped>
	.login {
		height: 100vh;
		display: flex;
		align-items: center;
		justify-content: center;

		.item {
			height: 48vh;
			width: 50%;
			box-shadow: 0px 0px 8px 4px #ddd;
			border-radius: 8px;

			.el-row {
				height: 100%;

				.left {
					height: 100%;
					border-radius: 8px 0px 0px 8px;
					overflow: hidden;

					img {
						width: 100%;
						height: 100%;
						object-fit: fill;
						object-fit: cover;
					}
				}

				.right {
					height: 100%;
					border: 1px solid #ddd;
					border-radius: 0 8px 8px 0;
					padding: 20px;
					box-sizing: border-box;

				}
			}
		}
	}
</style>
